import React, {useState, useEffect} from 'react';
import {Toast, NavBar, Icon, Result} from 'antd-mobile';
import {PayApply, QueryApplyPay, pay} from "@/api/wx/wxpay.js";
import {R} from "@/assets/js/dict.js"

import wxpay from "@/assets/svg/wxpay.svg"
import prePay from "@/assets/svg/prePay.svg"

import './pay.scss';

const myImg = src => <img src={src} className="spe am-icon am-icon-md" alt=""/>;

/**
 * 支付订单费
 * @param PayOfOrder
 * @returns {*}
 * @constructor
 */
function PayOfOrder(props) {
    console.log("Pay---->", props);
    let [userInfo] = useState(() => {
        let d = sessionStorage.getItem("userInfo");
        if (!!d) {
            return JSON.parse(d);
        } else {
            Toast.offline("未能获取用户信息");
            return {};
        }
    });

    let [info, setInfo] = useState({
        flag: false, //是否已经支付的标识
        success: false,
        message: '确认签订一个订单，家教请支付中介费'
    }), [flush,doFlush] = useState("");



    function payHandle() {
        let params = {
            tutor_id: userInfo.id,
            order_id: sessionStorage.getItem("pay_order_id")
        };
        /**
         * 微信支付的测试代码
         */
        pay(() => PayApply(params), (p) => QueryApplyPay(p, (res) => {
            Toast.hide();
            let money = (p.total_fee || "40000") / 100;
            if (res.code === R.success) {

                //更新页面信息
                setInfo({flag: true, success: true, message: res[R.msg] || `中介费${money}元支付成功`});
                sessionStorage.removeItem("fee");
                sessionStorage.removeItem("pay_order_id");
            } else {
                setInfo({flag: true, success: false, message: res[R.msg] || `中介费${money}，支付失败`});
            }
        }));
    }

    useEffect(() => {
        let money = sessionStorage.getItem("fee") / 100;
        setInfo({flag: false, success: false, message: `确认签订一个订单，家教请支付中介费${money}元`})
    }, []);

    function show() {
        if (!info.flag) {
            return (<Result
                buttonText="付款"
                img={myImg(prePay)}
                title="微信支付"
                message={info.message}
                buttonType="primary"
                onButtonClick={payHandle}
            />);
        } else {

            if (info.success) {
                return (<Result
                    buttonText="确定"
                    img={myImg(wxpay)}
                    title="微信支付结果"
                    message={info.message}
                    buttonType="primary"
                    onButtonClick={() => props.history.goBack()}
                />);
            } else {
                return (<Result
                    buttonText="确定"
                    img={<Icon type="cross-circle-o" className="spe" style={{fill: '#F13642'}}/>}
                    title="微信支付失败"
                    message={info.message}
                    buttonType="primary"
                    onButtonClick={() => props.history.goBack()}
                />);
            }
        }
    }


    return (
        <div className="main">
            <NavBar
                mode="light"
                icon={<Icon type="left"/>}
                onLeftClick={() => props.history.goBack()}
            >订单支付</NavBar>
            {show()}
        </div>
    );
}

export default PayOfOrder;